<template>
  <div class="index">
    <div class="page-header-main">
      <div class="page-title">
        <span class="task-add" @click="gotoTaskAdd">添加</span>
        任务列表
        <span class="task-filter" @click="popupVisible = true" size="large">筛选</span>
        <mt-popup v-model="popupVisible" position="top" class="mint-popup-2" :modal="false">
          <div class="">
            <div class="select-title">
              排序方式
            </div>
            <div class="page-picker-wrapper">
              <mt-picker :slots="orderSlot" @change="onOrderChange" :visible-item-count="3"></mt-picker>
            </div>
          </div>

          <div class="">
            <div class="select-title">
              任务类型
            </div>
            <div class="page-picker-wrapper">
              <mt-picker :slots="taskTypeSlot" @change="onTaskTypeChange" :visible-item-count="3"></mt-picker>
            </div>
          </div>

          <div class="">
            <div class="select-title">
              数据类型
            </div>
            <div class="page-picker-wrapper">
              <mt-picker :slots="dataTypeSlot" @change="onDataTypeChange" :visible-item-count="3"></mt-picker>
            </div>
          </div>

          <mt-button @click="loadAgain" size="large" type="default">确定
          </mt-button>

        </mt-popup>
      </div>
    </div>

    <div class="page-infinite task-main" style="text-align: left;">
      <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <ul class="page-infinite-list"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="50"
          style="margin: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 50px;"
        >
          <li v-for="item in taskList" class="page-infinite-listitem task-item" @click="taskDetail(item.id)">
            <div class="task-title">
              {{ item.name }}
            </div>
            <div class="task-value">
              ¥ {{ item.task_value }}
            </div>
            <div class="task-desc">
              {{ item.describe }}
            </div>
          </li>
        </ul>
        <p v-show="loading" class="page-infinite-loading" style="text-align: center;">
          加载中...
        </p>

        <p v-show="emptyList" class="page-infinite-loading" style="text-align: center;">
          暂无数据
        </p>
      </div>
    </div>

    <tab-bar></tab-bar>

  </div>
</template>

<script>
import axios from 'axios';
import tabBar from './common/TabBar';

const orderTypeList = {
  智能排序: 0,
  酬劳最高: 1,
  离我最近: 2,
  最新上线: 3,
};
const taskTypeList = {
  全部任务: 0,
  单人任务: 1,
  多人任务: 2,
};
const dataTypeList = {
  全部: 0,
  文本: 1,
  音频: 2,
  图片: 3,
  视频: 4,
  问卷: 5,
};

export default {
  name: 'index',
  data() {
    return {
      list: [],
      taskList: [],
      loading: false,
      emptyList: false,
      allLoaded: false,
      wrapperHeight: 0,
      popupVisible: false,
      orderType: 0,
      taskType: 0,
      dataType: 0,
      lastId: 0,
      loadDisable: true,

      orderSlot: [{
        flex: 1,
        values: Object.keys(orderTypeList),
        className: 'solt',
      }],
      taskTypeSlot: [{
        flex: 1,
        values: Object.keys(taskTypeList),
        className: 'solt',
      }],
      dataTypeSlot: [{
        flex: 1,
        values: Object.keys(dataTypeList),
        className: 'solt',
      }],
    };
  },
  methods: {
    loadMore() {
      if (this.loadDisable === false) {
        return;
      }

      this.loading = true;
      axios.get('/task/get_list', {
        params: {
          last_id: this.lastId,
          type_task: this.taskType,
          data_type: this.dataType,
          order_type: this.orderType,
          industry: 0,
        },
      }).then((response) => {
        if (response.status === 200) {
          if (response.data.status === true &&
            response.data.message > 0 && response.data.data.length > 0) {
            this.lastId = response.data.message;
            this.taskList = this.taskList.concat(response.data.data);
          } else {
            this.loadDisable = false;
            this.emptyList = true;
          }
          this.loading = false;
        }
      });
    },
    loadAgain() {
      this.loadDisable = true;
      this.taskList = [];
      this.popupVisible = false;
      this.loadMore();
    },
    taskDetail(id) {
      this.$router.push({
        name: 'Detail',
        params: {
          taskId: id,
        },
      });
    },
    gotoTaskAdd() {
      this.$router.push({
        name: 'Publish',
      });
    },
    onOrderChange(picker, value) {
      this.orderType = orderTypeList[value[0]];
    },
    onTaskTypeChange(picker, value) {
      this.taskType = taskTypeList[value[0]];
    },
    onDataTypeChange(picker, value) {
      this.dataType = dataTypeList[value[0]];
    },
  },
  mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  },
  components: {
    'tab-bar': tabBar,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}

.index {
  margin-top: -40px;
}

.task-filter {
  margin-right: 30px;
  float: right;
  width: 30px;
  height: 30px;
}
.task-item {
  border-bottom: solid 1px #eee;
  padding: 10px;
}
.task-title {
  font-size: 18px;
  display: inline-block;
  width: 60%;
}
.task-value {
  display: inline-block;
  float: right;
  color: #42b983;
  font-size: 20px;
}
.task-desc {
  font-size: 12px;
}
.task-add {
  float: left;
  margin-left: 30px;
}

.mint-popup-2 {
  width: 100%;
  backface-visibility: hidden;
}
.mint-popup-2 .page-picker-wrapper {
  display: inline-block;
  width: 50%;
  float: right;
}

.select-title {
  line-height: 108px;
  height: 108px;
  display: inline-block;
}
.solt {
  font-size: 12px;
}

@component-namespace page {
  @component infinite {
    @descendent listitem {
      height: 50px;
      line-height: 50px;
      border-bottom: solid 1px #eee;
      text-align: left;
      &:first-child {
        border-top: solid 1px #eee;
      }
    }
    @descendent wrapper {
      margin-top: -1px;
      overflow: scroll;
    }
    @descendent loading {
      text-align: center;
      height: 50px;
      line-height: 50px;
      div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}
</style>
